// 菜单配置
<template>
  <div class="problemList bg-f2">
    <div class="bg-f2 bg-fff">
      <div class="addMargin">
        <el-form :inline="true" class="formLine">
          <el-form-item class="formLine_item">
            <el-button class="btnSizeStyle" type="success" icon="el-icon-plus" @click="addMenu('添加菜单')">添加</el-button>
            <!-- :disabled="quanxianBtns.btn1"  -->
          </el-form-item>
        </el-form>
      </div>
      <el-table
        border
        stripe
        :header-cell-style="{ backgroundColor: '#ECF3FC', color: '#333', height: '48px', borderBottom: '1px solid #CEE1F7' }"
        :data="tableData"
        style="width: 100%"
        row-key="id"
        lazy
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        v-loading="tableLoad"
      >
        <!-- :load="load" -->
        <!-- 提示语句 -->
        <template slot="empty">{{ tableMessage }}</template>
        <!-- <el-table-column type="index" label="序号" min-width="50" align="center" /> -->
        <el-table-column prop="qxmc" label="菜单名称" min-width="200"> </el-table-column>
        <el-table-column prop="tp" label="菜单图标" width="80">
          <template slot-scope="scope">
            <svg class="iconfont" aria-hidden="true" style="width: 40px; height: 40px">
              <use :xlink:href="`#el-icon-my${scope.row.tp}`" />
            </svg>
          </template>
        </el-table-column>
        <el-table-column prop="px" label="排序" min-width="180"> </el-table-column>
        <el-table-column prop="qxfwlj" label="访问路径" min-width="180"> </el-table-column>
        <el-table-column prop="lx" label="菜单级别">
          <template slot-scope="scope">
            <el-tag :type="menuLevel[scope.row.lx - 1].tagType" :effect="menuLevel[scope.row.lx - 1].effect">{{ menuLevel[scope.row.lx - 1].leavelName }}</el-tag>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="address" label="添加人"> </el-table-column>
        <el-table-column prop="address" label="添加时间"> </el-table-column> -->
        <el-table-column label="操作" align="right" width="80" fixed="right">
          <template slot-scope="scope">
            <!-- :disabled="quanxianBtns.btn3" -->
            <el-button type="text" class="Btn_nan" @click="editMenu('编辑菜单', scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <!-- <el-row class="page-row">
        <el-col :span="12"> </el-col>
        <el-col :span="12" style="height: 47px; display: table">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next"
            :total="total"
          ></el-pagination>
        </el-col>
      </el-row> -->
    </div>
  </div>
</template>
<script>
import { getUrl } from '@/utils/getUrl.js'
import { pinT } from '@/utils/allUrl.js'
import { timeLoad, tableMessageText } from '@/assets/js/setTime'
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      tableData: [],
      total: 0,
      tableMessage: '',
      tableLoad: false,
      tableTimer: null,
      quanxianBtns: {
        btn1: true,
        btn2: true,
        btn3: true,
      },
      menuLevel: [
        { leavelName: '一级菜单', tagType: '', effect: 'light' },
        { leavelName: '二级菜单', tagType: 'success', effect: 'light' },
        { leavelName: '三级菜单', tagType: 'warning', effect: 'light' },
        { leavelName: '按钮', tagType: '', effect: 'dark' },
      ],
    }
  },
  watch: {
    tableLoad(newVal, oldVal) {
      this.tableTimer = setTimeout(() => {
        if (this.tableLoad) {
          this.tableLoad = false
          this.tableMessage = tableMessageText
          this.tableData = []
        }
      }, timeLoad)
    },
  },
  created() {
    this.initList()
    // 权限按钮
    // this.jurisdictionBtn()
    // this.getContractList()
    // 获取所属机构
    // this.getMechanism()
  },
  methods: {
    async initList() {
      clearTimeout(this.tableTimer)
      this.tableLoad = true
      //   const params = new URLSearchParams()
      //     params.append('KSXJSJ', xjsj[0] || '')
      const { data: res } = await this.$http.post(`${pinT}menu/selectMenuManagement`)
      this.tableLoad = false // 表格加载中样式
      switch (res.code) {
        case '0000':
          this.tableData = JSON.parse(JSON.stringify(res.data).replace(/subsetList/g, 'children'))
          break
        default:
          this.tableMessage = res.message
          break
      }
    },
    handleSizeChange(e) {
      this.currentPage = 1
      this.pageSize = e
      this.searchBtn()
    },
    handleCurrentChange(e) {
      this.currentPage = e
      this.searchBtn()
    },
    // 添加
    addMenu(title) {
      this.$router.push({
        name: 'addMenu', // 路由
        query: {
          // 传递参数
          title: title,
          type: 0,
        },
      })
    },
    // 编辑
    editMenu(title, scope) {
      this.$router.push({
        name: 'addMenu', // 路由
        query: {
          // 传递参数
          title: title,
          type: 1,
          id: scope.id,
        },
      })
    },
    // 获取按钮权限
    jurisdictionBtn() {
      const menus = JSON.parse(getUrl('jurisdiction'))
      menus.forEach((item) => {
        if (item.qxdm === 'XJZX_XTXJD_XTGNXJD') {
          item.children.forEach((item2) => {
            if (item2.qxdm === 'xtxjd:create') {
              this.quanxianBtns.btn1 = false // 录入系统巡检单
            } else if (item2.qxdm === 'xtxjd:delete') {
              this.quanxianBtns.btn2 = false // 删除
            } else if (item2.qxdm === 'xtxjd:update') {
              this.quanxianBtns.btn3 = false // 编辑
            }
          })
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.addMargin {
  .increased {
    background: rgba(103, 194, 58, 1);
    font-size: 14px;
    color: #fff;
    text-align: center;
  }
  .formLine {
    margin: 0;
    float: left;
    .formLine_item {
      padding: 0;
      margin-bottom: 15px;
    }
  }
}
.addMargin:after {
  content: '';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.el-table {
  border: 1px solid #eaeaea;
  border-bottom: 0;
  .operation {
    display: inline-block;
    margin: 0 5px;
    height: 10px;
    border-left: 1px solid #b3b3b3;
  }
  .Btn_nan {
    padding: 0;
  }
  .usersNumber {
    cursor: pointer;
    overflow: hidden;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    white-space: nowrap;
    position: relative;
  }
  .usersNumber:after {
    content: '...';
    text-align: right;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10%;
    height: 1.8em;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
  }
}
.fooer_box {
  height: 48px;
  line-height: 47px;
  padding: 0 15px;
  box-sizing: border-box;
  border-top: none;
  border: 1px solid #eaeaea;
  border-top: 0;
  display: flex;
  justify-content: space-between;
  .el-pagination {
    padding: 6px 5px;
  }
}
.dialogText {
  .p_15 {
    padding-top: 15px;
  }
  font-size: 14px;
  color: #333;
  .star {
    color: #f56c6c;
  }
  .lineHight .el-row {
    line-height: 40px;
    span {
      color: #333;
      &.contentFont {
        display: inline-block;
        width: 103px;
        color: #7a7a7a;
        text-align: right;
      }
    }
  }
}
</style>
